<template>
  <div class="app-container">
    <div id="map" style="width: 100%;height: 800px;"></div>
  </div>
</template>

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
// 这里需要安装 echarts-extension-amap 插件; 否则会报错(Unkown coordinate system amap)
// 安装命令: npm install echarts-extension-amap --save
import "echarts-extension-amap"; // 高德地图坐标系插件

const b = ref('郑州')

const option = {
  amap: {// 高德地图配置
    center: ["116.372655", "30.036025"],//[104.114129, 37.550339], // 地图中心点
    zoom: 15,// 地图缩放级别
    viewMode: '3D',// 地图模式
    resizeEnabled: true,// 是否监控地图容器尺寸变化
    mapStyle: 'amap://styles/darkblue',// 地图样式
    pitch: 15, //视角高度
    skyColor: "#33216a", //天空颜色 33216a
  },
  animation: true, //是否开启动画
  series: [
    {
      type: "effectScatter",
      rippleEffect: { number: 1, period: 0, scale: 1 },
      coordinateSystem: "amap",// 高德地图坐标系
      zlevel: 5,
      label: {
        formatter: '{b}',
        position: 'right',
        show: true,
        offset: [10, 5],
        color: "rgba(0, 0, 0)",
        fontWeight: 600,
        backgroundColor: '#fff',
        padding: [3, 3, 3, 3],
        borderRadius: 5,
        fontFamily: "BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji",
        fontSize: 14
      },
      itemStyle: {
        color: (val) => {
          if (val.name == "郑州") {
            return "rgba(0,0,205,0.64)";
          } else {
            return "rgba(255,52,21,0.60)";
          }
        },
      },
      symbolSize: 8,
      // tooltip: {
      //   trigger: 'item',
      //   //formatter: '{b}市 <br/>跨境网络零售:{c}亿元',
      //   show: true,
      //   formatter: function (params) {
      //      console.log("12345789");
      //     return params.data.name + "市<br/>跨境网络零售:" + params.data.value[2] + "亿元";
      //   }
      // },
      data: [
        {
          name: "北京办事处",
          value: ["116.372655", "40.036025"]
        },
        {
          name: "南宁办事处",
          value: ["108.79901", "21.98436"]
        },
        {
          name: "郑州总公司",
          value: ["118.79901", "31.98436"]
        },
      ],
    },
    {
      zlevel: 5,
      type: "lines",// 线图(在Echarts的配置项手册中可以查到)
      coordinateSystem: "amap",// 高德地图坐标系
      effect: {// 线特效配置
        show: true,// 是否显示特效
        period: 3, //动画时间
        trailLength: 0,// 特效尾迹长度
        symbol: "arrow",// 特效图形
        symbolSize: 15,// 特效图形大小
      },
      lineStyle: {// 线样式
        normal: {// 正常状态
          color: "#FF0000",// 线颜色
          width: 3,// 线宽
          opacity: 0.5,// 线透明度
          curveness: -0.2,// 线曲度
        },
      },
      data: [// 线数据
        [
          ["116.372655", "40.036025"],// 起点
          ["118.79901", "31.98436"],// 终点
        ],
        [
          ["116.372655", "40.036025"],// 起点
          ["108.79901", "21.98436"],// 终点
        ],
      ],
    },

  ]
}

onMounted(() => {
  initMap();
})

function initMap () {
  window._AMapSecurityConfig = {
    securityJsCode: 'ca192d53b7cb31e6f7ceb32dd2f597bd', // 高德地图的code
  }
  AMapLoader.load({
    key: "f62977716d07f6a0f5880e32db5972ad", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    let chart = echarts.init(document.getElementById("map"));
    chart.setOption(option);
    chart.getModel().getComponent('amap').getAMap();//获取高德地图实例
  });
}
</script>
<style scoped></style>